<template>
  <my-template>
    <el-carousel trigger="click" height="568px">
      <el-carousel-item v-for="item in image" :key="item.id">
        <img
            style="height: 600px;width: 100%;"
            class="lbt-img"
            :src="item.src"
            :alt="item.name"/>
      </el-carousel-item>
    </el-carousel>
    <!-- 主要内容 -->
    <el-main>
      <!-- 首页主 -->
      <div class="homez">
        <!--电子地图-->
        <el-row>
          <div class="title">
            <img
                class="title-img"
                src="@/assets/home/Electronic map.png"
                alt=""
            />
          </div>
          <el-col :span="10" class="map-left">
            <el-row>
              <el-col :span="12" v-for="item in cardData">
                <div class="card">
                  <div class="icon">
                    <img class="icon-img" :src="item.imgsrc" alt=""/>
                  </div>
                  <div class="text">{{ item.name }}</div>
                  <div class="num" :style="item.style" @click="example">{{ item.data }}</div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="14">
            <div class="home-map" id="cesiumDiv" @click="zxdt">
            </div>
          </el-col>
        </el-row>
        <!--开发中心-->
        <el-row>
          <div class="title">
            <img
                class="title-img"
                src="@/assets/home/Development Center.png"
                alt=""
            />
          </div>

          <div class="appcenter">
            <div class="appcenter-top">
              <img
                  class="appcenter-top-img"
                  src="@/assets/home/图层 7.png"
                  alt=""
              />
              <div class="appcenter-top-right">
                <div class="top-title">
                  介绍
                </div>
                <span class="top-text" style="text-indent:2em;">
                    城市发展定位，依托云计算、物联网、倾斜摄影等新技术，建成统一时空基准、时空大数据和时空信息云平台，统一管理、维护、共享时空信息基础设施，推动政府、企业、公众的专题时空应用系统建设，为新型智慧城市建设过程中相关行业领域开展智慧应用提供时空信息基础支撑服务；同时，结合特色，使在时空信息云平台的建设与应用达到国内先进或领先的水平。
                  </span>
                <router-link @click.native="routerClick('5_1')" class="top-link" to="/development/introduce">查看详情
                </router-link>
              </div>
            </div>
            <div class="appcenter-bottom">
              <el-row class="bottom-row" type="flex" justify="space-around">
                <el-col class="bottom-col" v-for="item in info" :span="8">
                  <div class="bottom-info" @click="kfzx(item.puth)">
                    <img
                        class="bottom-img"
                        style="float: left"
                        :src="item.src"
                        alt=""
                    />
                    <div class="bottom-info-right">
                      <span class="bottom-title">{{ item.title }}</span>
                      <span class="bottom-text" style="text-indent:2em;">{{ item.text }}</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
        <!--应用中心-->
        <el-row>
          <div class="title">
            <img
                class="title-img"
                src="@/assets/home/Application type.png"
                alt=""
            />
          </div>
          <div class="bottom">
            <el-row class="card-row" type="flex" justify="space-around" style="padding-bottom: 20px;">
              <el-col
                  class="card-col"
                  v-for="item in mapData"
                  :key="item.id"
                  :span="6"
              >
                <el-card ref="card">
                  <div class="card-img">
                    <img class="el-card-img" :src="item.image" alt=""/>
                    <img class="img-link" src="@/assets/home/组 5.png" alt="" @click="selectCard(item.index)"/>
                  </div>
                  <div class="card-text">
                    <div class="border-title">{{ item.title }}</div>
                    <div class="border-text">
                      {{ item.text }}
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <div class="all">
              <el-button class="allbtn" @click="app">查看全部</el-button>
            </div>
          </div>
        </el-row>
      </div>
    </el-main>
    <!--    -->
    <my-footer></my-footer>
  </my-template>
</template>

<script>
import MyTemplate from "@/components/my-template";
import MyFooter from '@/components/my-footer'
import HomeList from "./HomeList.vue";
import $axios from "@/network";

import pub from "../../../public/js/public.js"

/**
 * 首页
 */
export default {
  name: "Home",
  components: {
    MyTemplate,
    MyFooter,
    HomeList,
  },
  data() {
    return {
      viewer: null,
      evhome: this.$mapUrl + "/ev-server/manager/index.html#/home",
      tt: "0",
      defaultActive: "",
      activeName: "first",
      image: [
        {
          name: "1",
          src: require("@/assets/home/ff1.jpg"),
        },
        {
          name: "2",
          src: require("@/assets/home/ff2.jpg"),
        },
        {
          name: "3",
          src: require("@/assets/home/ff3.jpg"),
        },
        {
          name: "4",
          src: require("@/assets/home/ff4.jpg"),
        }
      ],
      cardData: [
        {
          id: "1",
          name: "内存占用",
          data: "0.00(0%)",
          style: "",
          sj: "",
          imgsrc: require("@/assets/home/图层 3.png"),
        },
        {
          id: "2",
          name: "缓存占用",
          data: "0.00",
          style: "",
          sj: "",
          imgsrc: require("@/assets/home/图层 4.png"),
        },
        {
          id: "3",
          name: "数据服务个数",
          data: "0",
          style: "",
          sj: "",
          imgsrc: require("@/assets/home/图层 6.png"),
        },
        {
          id: "4",
          name: "更多实例",
          data: "详情 >",
          style: "font-size: 12px;",
          sj: "",
          imgsrc: require("@/assets/home/图层 5.png"),
        }
      ],
      info: [
        {
          id: "1",
          title: "快速入门",
          text: "通过本项目构建天、空、地一体化时空基础设施体系",
          src: require("@/assets/home/矩形 8.png"),
          puth: "/development/introduce",
        },
        {
          id: "2",
          title: "开发包下载",
          text: "提供多种网页采集策略与配套资源，帮助整个采集过程实现数据的完整性与稳定性",
          src: require("@/assets/home/矩形 8 拷贝.png"),
          puth: "/development/download",
        },
        {
          id: "3",
          title: "API文档",
          text: "采集策略与配套资源只需简单设置，就可快速准确获取数据",
          src: require("@/assets/home/矩形 8 拷贝 2.png"),
          puth: "/development/archive",
        },
      ],
      mapData: []
    };
  },
  mounted() {
    this.selectDefaultActive();
    this.selectApp();
    this.webGlobe();
    this.ev();
  },
  watch: {
    $route: {
      handler: "selectDefaultActive",
      deep: true,
    },
  },
  methods: {

    routerClick(value) {
      //向TopMenu传值
      pub.$emit("value", value);

    },

    //电子地图
    ev() {
      // memoryUsage
      let r = {
        "code": 200,
        "status": true,
        "msg": "操作成功",
        "data": {
          "code": 200,
          "data": "285.00M"
        }
      }
      this.cardData[1].data = r.data.data;

      // getServices
      this.cardData[2].data = 151;

      // getMemory
      this.cardData[0].data = "10.45GB(33.47%)";
    },
    webGlobe() {
      let vecProvider = new Cesium.UrlTemplateImageryProvider({
        // url: 'http://localhost/static/haigangqu/cache_vec/{z}/{x}/{y}.png',
        url: 'http://172.16.210.4/mapcache/cache_vec/{z}/{x}/{y}.png',
        maximumLevel: 18
      });
      let cvaProvider =  new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://172.16.210.4/mapcache/TDT_Cache_cva_w/{z}/{x}/{y}.png',
        maximumLevel: 18
      });
      let vecProvider1 = new Cesium.UrlTemplateImageryProvider({
        //url: 'http://localhost/static/haigangqu/cache_vec/{z}/{x}/{y}.png',
        url: 'http://172.16.210.4/mapcache/TDT_Cache_vec_w/{z}/{x}/{y}.png',
        maximumLevel: 18
      });
      this.viewer = new Cesium.Viewer("cesiumDiv", {
        imageryProvider: vecProvider,
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        navigationHelpButton: false,
        sceneMode: 1, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode //2D 3D转换
        mapProjection: new Cesium.WebMercatorProjection()//地图投影体系
      });
      if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){//判断是否支持图像渲染像素化处理
        this.viewer.resolutionScale = window.devicePixelRatio;
      }
      //是否开启抗锯齿
      this.viewer.scene.fxaa = true;
      this.viewer.scene.postProcessStages.fxaa.enabld = true;
      // 文字无遮挡
      this.viewer.cesiumWidget.creditContainer.style.display = "none";
      //实体不遮挡
      this.viewer.scene.globe.depthTestAgainstTerrain = false;
      this.viewer.scene.globe.baseColor = new Cesium.Color(255, 255, 255, 1);
      // 加载
      //this.viewer.imageryLayers.addImageryProvider(cvaProvider)
      //
      this.viewer.scene.camera.flyTo({
        destination: new Cesium.Cartesian3.fromDegrees(118.85908532,39.24150372, 50000),
        duration: 0,
        complete: function callback() {
        },
      });
    },
    selectApp() {
      let d = [];
      let res = {
        "code": 200,
        "status": true,
        "msg": "操作成功",
        "data": [
          {
            "id": "1",
            "caseName": "智慧海港场景化IOC系统",
            "ipAddress": "",
            "introduce": "海港新型智慧城市建设以服务“1341”发展战略为根本，围绕全省试点示范建设标准，按照“1+4+5+N”的整体构架，在“智慧海港”信息化建设的基础上，利用5G、物联网、大数据、云计算、区块链等新一代信息技术，统筹推进智慧党建、智",
            "casePicture": "http://172.16.210.4/gis_cloud_data/ioc.png,https://app.tianditu.gov.cn/appImage/6165d70f07eac73f8dd05c71c8938002/20191204094512/thumb/7907141v.JPG"
          },
          {
            "id": "2",
            "caseName": "综合行政执法平台",
            "ipAddress": "",
            "introduce": "综合行政执法平台实现现场视频采集、管理、存储、查询、语音现场对讲、单点定位、移动轨迹显示等功能。全面覆盖执法监督的现场录入、视频信息 标注、评论、统计分析、日志审计和系统管理等关键环节，为执法监督和管理提供了完整的功能支撑。",
            "casePicture": "http://172.16.210.4/gis_cloud_data/综合执法平台1.jpg,http://172.16.210.4/static/gis_cloud_data/综合执法平台2.jpg"
          },
          {
            "id": "3",
            "caseName": "协调指挥一张图",
            "ipAddress": "",
            "introduce": "通过“指挥调度一张图”，指挥中心在动态勤务系统看到人员、装备、岗位，能够实时感知治安要素动态，精准指导社会治安防控。辖区哪里发了案，指挥中心可直接调度最近警力赶往处置。在民警处警中，指挥中心可与民警执法记录仪联",
            "casePicture": "http://172.16.210.4/gis_cloud_data/协同.png,https://app.tianditu.gov.cn/appImage/6165d70f07eac73f8dd05c71c8938002/20191204094512/thumb/7907141v.JPG"
          },
          {
            "id": "4",
            "caseName": "GIS一张图",
            "ipAddress": "",
            "introduce": "GIS一张图系统通过构建海港区统一地图场景的方式，全面收集和整理海港区各类业务数据，建立各类业务数据的关联关系，采用图形、表格和GIS相结合的方式，实现数据查询、统计分析、信息展示的功能，以便直观、准确、动态地展现海港区“一张图”全面的信息，为海港区业务管理、综合监管和辅助决策提供数据和技术支持.",
            "casePicture": "http://172.16.210.4/gis_cloud_data/gis%E4%B8%80%E5%BC%A0%E5%9B%BE.png"
          }
        ]
      }
      for (let i = 0; i < 4; i++) {
        d[i] = {
          index: res.data[i].id,
          title: res.data[i].caseName,
          text: res.data[i].introduce,
          image: res.data[i].casePicture.split(",")[0],
          url: res.data[i].ipAddress
        }
      }
      this.mapData = d;
    },
    app() {
      this.$router.push({
        path: "/application",
      });
    },
    kfzx(v) {
      this.$router.push({
        path: v,
      });
    },
    zxdt() {
      this.$router.push({
        path: "/online",
      });
    },
    example() {
      this.$router.push({
        path: "/operations/syslog",
      });
    },
    selectCard(key) {
      this.$router.push({
        name: "ApplicationDetailed",
        query: {
          id: key,
        },
      });
    },
    handleSelect(key, keyPath) {
      this.$router.push({
        path: key,
      });
    },
    selectDefaultActive() {
      const path = this.$route.matched[0].path;
      this.defaultActive = path === "" ? "/" : path;
    },
  },
  beforeRouteLeave(to, from, next) {
    /**
     * {离开路由销毁 viewer}
     *
     * @author: 宋康
     * @date: 2022/10/10 17:16
     */
    if (null != this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
    next();
  }
};
</script>
<style lang="scss" scoped>

.homez {
  width: 100%;
  min-height: 80vh;
  padding: 0;

  .el-row {
    width: 80%;
    height: 100%;
    margin: 0 auto;

    .title {
      width: 100%;
      height: 62px;
      text-align: center;
      padding: 50px 0;
    }

    .el-col {
      .center {
        height: 364px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .home-list {
        height: 364px;
      }
    }
  }

  .map-left {
    margin-top: 10px;

    .el-row {
      width: 100%;

      .el-col {
        padding: 30px 0;

        .card {
          max-width: 200px;
          min-height: 100px;
          margin: 30px 0;

          .icon {
            width: 95px;
            height: 60px;
            float: left;
            text-align: center;
          }

          .text {
            font-size: 16px;
            float: left;
            margin-top: -5px;
          }

          .num {
            float: left;
            font-size: 20px;
            margin-top: 15px;
            font-weight: 700;
            color: #005aca;
            width: 60px;
          }
        }
      }
    }
  }

  .home-map {
    width: 100%;
    height: 500px;
    text-align: center;

    background-image: url("~@/assets/home/底色 拷贝 4.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .map-img {
      width: 90%;
      height: 426px;
      margin-top: 37px;
    }
  }

  .appcenter {
    width: 100%;
    padding: 60px;
    box-sizing: border-box;
    border: 1px solid #dcd9d9;
    border-radius: 4px;

    .appcenter-top {
      width: 100%;
      height: 200px;

      .appcenter-top-img {
        float: left;
      }

      .appcenter-top-right {
        height: 100%;
        margin-left: 330px;
        overflow: hidden;

        .top-title {
          width: 100%;
          max-width: 600px;
          font-size: 26px;
          font-family: SourceHanSansCN-Regular;
          font-weight: 400;
          color: #1276f2;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .top-text {
          font-size: 16px;
          font-family: Adobe Heiti Std R;
          color: #666666;
          line-height: 28px;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .top-link {
          float: left;
          font-size: 16px;
          font-family: SourceHanSansCN;
          font-weight: 400;
          color: #4191f5;
          line-height: 33px;
          text-decoration: none;
        }
      }
    }

    .appcenter-bottom {
      width: 100%;
      height: 100px;

      .bottom-row {
        width: 100%;

        .bottom-col {
          padding: 0 20px;

          .bottom-info {
            width: 100%;
            height: 100%;

            .bottom-img {
              margin-top: 15px;
            }

            .bottom-info-right {
              height: 100%;
              margin-left: 80px;

              .bottom-title {
                float: left;
                font-size: 20px;
                font-weight: normal;
                font-family: Adobe Heiti Std R;
                color: #4191f5;
                margin-top: 15px;
                white-space: nowrap;
              }

              .bottom-text {
                float: left;
                font-size: 16px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: #666666;
                line-height: 20px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }

  .bottom {
    width: 100%;
    min-height: 300px;

    .card-row {
      width: 100%;

      .card-col {
        padding: 0 10px;

        .el-card {
          width: 100%;
          height: 100%;
          cursor: pointer;

          &:hover {
            color: #1276f2;
          }

          ::v-deep.el-card__body {
            padding: 0;
          }

          .card-img {
            width: 100%;
            height: 200px;
            float: left;
            position: relative;

            .el-card-img {
              width: 100%;
              height: 200px;
              float: left;
            }

            .img-link {
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
              margin: auto;
              display: none;
            }
          }

          .card-text {
            width: 100%;
            float: left;
            padding: 0 10px;

            .border-title {
              max-width: 90%;
              float: left;
              font-size: 20px;
              padding: 10px 10px 0px 10px;
              font-family: Adobe Heiti Std;
              font-weight: 600;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .border-text {
              max-width: 90%;
              float: left;
              font-size: 15px;
              margin: 10px;
              font-family: Adobe Heiti Std;
              font-weight: 600;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }
        }

        .el-card:hover .img-link {
          display: inline-block;
        }

        .el-card:hover .el-card-img {
          opacity: 0.25;
        }
      }
    }

    .all {
      width: 100%;
      padding: 20px 0;
      margin: 20px auto 0;
      text-align: center;

      .allbtn {
        width: 199px;
        height: 48px;
        background: rgba(255, 255, 255, 0);
        border: 2px solid #1276f2;
        border-radius: 4px;
        color: #1276f2;
      }
    }
  }
}

.el-footer {
  padding-top: 20px;
  text-align: center;
  color: #aaa;
  background-color: #005aca;
  border-top: 4px solid #c4e6f2;

  a {
    width: 100%;
    color: #aaa;
    text-decoration: none;

    &:hover {
      color: blue;
    }
  }

  .title {
    max-width: 1410px;
    margin: 0 auto;
    padding: 20px 0;

    .span {
      // background-color: rgb(48, 52, 57);
      background-color: #409eff2e;
      padding: 16px 70px;
      margin: 10px;
      cursor: pointer;
    }
  }

  .footer-about {
    margin: 20px auto;
    display: flex;
    justify-content: center;

    .about-left {
      float: left;

      div {
        margin-bottom: 10px;
      }
    }

    .about-right {
      width: 80px;
      height: 80px;
      float: left;
    }
  }
}
</style>